<template>
  <div class="chart">
    <div v-if="widgetData.value.bgImg !== ''" class="titleBox">
      <div class="img"><img :src="widgetData.value.bgImg"></div>
      <div class="title"><span>{{ widgetData.value.title }}</span></div>
    </div>
    <div v-else class="titleBox">
      <!-- <i class="el-icon-picture"></i> -->
      <div class="title"><span>{{ widgetData.value.title }}</span></div>
    </div>
    <div :style="{ width: w + 'px', height: (h - 40) + 'px' }" id="lineChart3"></div>
  </div>
</template>

<script>
export default {
  components: {},
  props: ['widgetData'],
  computed: {
    w() {
      let width = parseInt(this.widgetData.style.w / 4 * 3);
      return width
    },
    h() {
      let height = parseInt(this.widgetData.style.h / 4 * 3);
      return height
    }
  },
  data() {
    return {
      chartData: this.widgetData.value.chartData,
    }
  },
  watch: {},
  created() { },
  mounted() {
    this.getEchart();
  },
  methods: {
    getEchart() {
      let chartDom = document.getElementById("lineChart3");
      let chart = this.$echarts.init(chartDom);

      const xData = this.chartData.xData;
      const yData1 = this.chartData.yData1;
      const yData2 = this.chartData.yData2;
      const yData3 = this.chartData.yData3;

      let option = {
        legend: {
          textStyle: {
            fontFamily: 'Source Han Sans CN',
            fontWeight: 400,
            fontSize: 14,
            color: "#fff",
          },
        },
        tooltip: {
          show: true,
          trigger: "axis",
          textStyle: {
            color: "#fff",
          },
          backgroundColor: "rgba(16, 123, 184, .52)", //设置背景颜色
          borderColor: "rgba(255, 255, 255, 0)",
          confine: false,
          formatter: function (params) {
            var str = params[0].name + ":";
            params.filter(function (item) {
              if (item.componentSubType == "line") {
                str += "<br/>" + item.seriesName + "：" + item.value;
              }
            });
            return str;
          },
        },
        grid: {
          top: "12%",
          left: "2%",
          right: "2%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitArea: {
              show: false,
            },
            axisLabel: {
              color: "#fff",
              interval: 0,
              fontSize: "12px",
              align: "center",
              formatter: function (value) {
                return value.length > 4 ? value.slice(0, 4) + '...' : value; // 只显示前4个字符，并添加省略号
              }
            },
            axisLine: {
              lineStyle: {
                color: "#2882C8",
              },
            },
            data: xData,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "人",
            splitNumber: 5,
            nameTextStyle: {
              color: "#fff",
              fontSize: 12,
              align: "center",
              padding: [0, 20, -3, 0],
            },
            axisLabel: {
              formatter: "{value}",
              color: "rgba(95, 187, 235, 1)",
              textStyle: {
                fontSize: 14,
                color: "#fff",
                lineHeight: 16,
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(28, 130, 197, .3)",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(28, 130, 197, .3)",
                type: "solid",
              },
            },
          },
        ],
        series: [
          {
            name: "数据1",
            data: yData1,
            type: "line",
            smooth: true,
            symbol: 'circle',
            showSymbol: true,
            symbolSize: 5,
            tooltip: {
              show: true,
            },
            itemStyle: {
              normal: {
                color: 'rgba(54,236,152, 1)',
                borderColor: 'rgba(54,236,152, 0.3)', // 外圆描边色（空心）
                borderWidth: 10, // 外圆描边粗细
                lineStyle: {
                  color: 'rgba(54,236,152, .6)',
                  width: 2
                },
                areaStyle: {
                  color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: 'rgba(54,236,152, 0)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(54,236,152, .6)'
                    }
                  ])
                }
              }
            }
          },
          {
            name: "数据2",
            data: yData2,
            type: 'line',
            smooth: true,
            symbol: 'circle',
            tooltip: {
              show: true,
            },
            itemStyle: {
              normal: {
                color: 'rgba(2,206,255, 1)',
                borderColor: 'rgba(2,206,255, 0.3)', // 外圆描边色（空心）
                borderWidth: 10, // 外圆描边粗细
                lineStyle: {
                  color: 'rgba(48,229,224, .6)',
                  width: 2
                },
                areaStyle: {
                  color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: 'rgba(48,229,224, 0)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(48,229,224, .6)'
                    }
                  ])
                }
              }
            }
          },
        ],
      };

      // 数据大于10条展示滚动条
      let dataZoom = [
        {
          show: true,
          // 设置滚动条类型
          type: "slider",
          // 数据窗口范围的起始数值
          startValue: 0,
          // 数据窗口范围的结束数值（一页显示多少条数据）
          endValue: 5,
          // 设置滚动条宽度，相对于盒子宽度
          width: "90%",
          // 设置滚动条高度
          height: 3,
          // 设置滚动条显示位置
          left: "center",
          // 设置选中范围的填充颜色
          fillerColor: "#449FED",
          // 设置边框颜色
          borderColor: "rgba(17, 100, 210, 0.12)",
          // 设置背景颜色
          backgroundColor: "#0E416D",
          // 是否显示detail，即拖拽时候显示详细数值信息
          showDetail: false,
          //是否显示数据阴影 默认auto
          showDataShadow: false,
          brushSelect: false,
          // 是否锁定选择区域（或叫做数据窗口）的大小
          zoomLoxk: true,
          // empty：当前数据窗口外的数据，被设置为空，即不会影响其他轴的数据范围
          filterMode: "empty",
          // 控制手柄的尺寸
          handleSize: 0,
          // dataZoom-slider组件离容器下侧的距离
          bottom: 18,
          moveHandleStyle: {
            opacity: 0,
          },
        },
        {
          // 没有下面这块的话，只能拖动滚动条，
          // 鼠标滚轮在区域内不能控制外部滚动条
          type: "inside",
          // 滚轮是否触发缩放
          zoomOnMouseWheel: false,
          // 鼠标滚轮触发滚动
          moveOnMouseMove: true,
          moveOnMouseWheel: true,
        },
      ];
      if (xData.length >= 10) {
        option.dataZoom = dataZoom
      }

      // 大屏适配
      window.addEventListener("resize", function () {
        chart.resize();
      });
      // 动态显示值
      if (option && typeof option === "object") {
        chart.setOption(option, true);
        let i1 = 0; //播放所在下标
        let mTime = setInterval(function () {
          chart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: i1,
          });
          i1++;
          if (i1 >= xData.length) {
            i1 = 0;
          }
        }, 2600);
      };
    }
  },
}
</script>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;

  span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .titleBox {
    width: 100%;
    height: 40px;
    position: relative;

    .img {
      width: 100%;
      height: 40px;
      position: absolute;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .title {
      position: absolute;
      width: 100%;
      height: 40px;
      line-height: 40px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 13px;
      font-size: 18px;
      color: #FFFFFF;
      background-color: #000;
    }

    .el-icon-picture {
      width: 100%;
      height: 40px;
      position: absolute;
      font-size: 3.125rem;
      background: #ffffff;
      color: #c1c1c1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>